<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PID Parameter Settings</title>
    <style>
        body {
            font-family: "Courier New", Courier, monospace;
        }

        .comments-text {
            color: darkgreen;
            font-size: 12px;
        }

    </style>

</head>
<body>

<h1>PID 参数设置</h1>
<!-- kp -->
<div>
    <label for="kp">Kp:</label>
    <input type="text" id="kp" value="0" readonly>
    <button onclick="resetValue('kp', 'kp')">Set 0</button>
    <button onclick="changeValue('kp', 1.0, 'kp')">+</button>
    <button onclick="changeValue('kp', -1.0, 'kp')">-</button>
    <span class="comments-text">[15]</span>
</div>
<br>

<!-- ki -->
<div>
    <label for="ki">Ki:</label>
    <input type="text" id="ki" value="0" readonly>
    <button onclick="resetValue('ki', 'ki')">Set 0</button>
    <button onclick="changeValue('ki', 0.1, 'ki')">+</button>
    <button onclick="changeValue('ki', -0.1, 'ki')">-</button>
    <span class="comments-text">[0.5]</span>
</div>
<br>

<!-- kd -->
<div>
    <label for="kd">Kd:</label>
    <input type="text" id="kd" value="0" readonly>
    <button onclick="resetValue('kd', 'kd')">Set 0</button>
    <button onclick="changeValue('kd', 0.1, 'kd')">+</button>
    <button onclick="changeValue('kd', -0.1, 'kd')">-</button>
    <span class="comments-text">[1.0]</span>
</div>
<br>

<h1>角度设置</h1>

<div>
    <label for="angleOffset">角度补偿(angleOffset):</label>
    <input type="text" id="angleOffset" value="0" readonly>
    <button onclick="resetValue('angleOffset', 'angleOffset')">Set 0</button>
    <button onclick="changeValue('angleOffset', 0.1, 'angleOffset')">+</button>
    <button onclick="changeValue('angleOffset', -0.1, 'angleOffset')">-</button>
    <span class="comments-text">[-3 ~ 3]</span>
</div>
<br>

<div>
    <label for="targetAngle">目标角度(targetAngle):</label>
    <input type="text" id="targetAngle" value="0" readonly>
    <button onclick="resetValue('targetAngle', 'targetAngle')">Set 0</button>
    <button onclick="changeValue('targetAngle', 0.2, 'targetAngle')">+</button>
    <button onclick="changeValue('targetAngle', -0.2, 'targetAngle')">-</button>
    <span class="comments-text">[-3 ~ 3] 控制前进后退</span>
</div>
<br>

<h1>转向设置</h1>
<div>
    <label for="turnKp">转速比例(turnKp):</label>
    <input type="text" id="turnKp" value="0" readonly>
    <button onclick="resetValue('turnKp', 'turnKp')">Set 0</button>
    <button onclick="changeValue('turnKp', 0.1, 'turnKp')">+</button>
    <button onclick="changeValue('turnKp', -0.1,'turnKp')">-</button>
    <span class="comments-text">[0.2 ~ 1] 控制转向灵敏度</span>
</div>
<br>
<div>
    <label for="turnSpeed">转向转速(turnSpeed):</label>
    <input type="text" id="turnSpeed" value="0" readonly>
    <button onclick="resetValue('turnSpeed', 'turnSpeed')">Set 0</button>
    <button onclick="changeValue('turnSpeed', 100, 'turnSpeed')">+</button>
    <button onclick="changeValue('turnSpeed', -100,'turnSpeed')">-</button>
    <span class="comments-text">[-600 ~ 600] 控制转速</span>
</div>
<br>

<h1>马达 PWM 补偿设置</h1>
<!-- Motor Pwm Offset -->
<div>
    <label for="leftMotorPwmOffset">左马达 PWM 补偿:</label>
    <input type="text" id="leftMotorPwmOffset" value="0" readonly>
    <button onclick="resetValue('leftMotorPwmOffset', 'leftMotorPwmOffset')">Set 0</button>
    <button onclick="changeValue('leftMotorPwmOffset', 1, 'leftMotorPwmOffset')">+</button>
    <button onclick="changeValue('leftMotorPwmOffset', -1,'leftMotorPwmOffset')">-</button>
    <span class="comments-text">[30 ~ 60]</span>
</div>
<br>
<div>
    <label for="rightMotorPwmOffset">右马达 PWM 补偿:</label>
    <input type="text" id="rightMotorPwmOffset" value="0" readonly>
    <button onclick="resetValue('rightMotorPwmOffset', 'rightMotorPwmOffset')">Set 0</button>
    <button onclick="changeValue('rightMotorPwmOffset', 1, 'rightMotorPwmOffset')">+</button>
    <button onclick="changeValue('rightMotorPwmOffset', -1,'rightMotorPwmOffset')">-</button>
    <span class="comments-text">[30 ~ 60]</span>
</div>

</body>

<script>

    const esp32Address = "http://192.168.2.180";

    function updateParam(param, value) {
        fetch(`${esp32Address}/set_params?param=${param}&value=${value}`, {method: "POST"})
            .then(response => response.text())
            .then(data => {
                console.log(data);
                data = JSON.parse(data);
                updateDataToPage(data.data);
            })
            .catch(error => console.error("Error:", error));
    }

    function changeValue(param, step, inputId) {
        const inputElement = document.getElementById(inputId);
        let currentValue = parseFloat(inputElement.value);
        let newValue = currentValue + step;

        if (["kp", "ki", "kd", "turnKp", "leftMotorPwmOffset", "rightMotorPwmOffset"].includes(param)) {
            if (newValue < 0) newValue = 0;
        }

        updateParam(param, newValue);

    }

    function resetValue(param, inputId) {
        document.getElementById(inputId).value = "0.0";
        updateParam(param, 0.0);
    }

    function updateDataToPage(data) {
        // data 是一个对象,  形如: {"kp":17,"ki":0.5,"kd":1,"angleOffset":-1.5,"leftMotorPwmOffset":42,"rightMotorPwmOffset":44}
        // 遍历对象的键值对, 根据 input 标签的 id 更新值
        for (const [key, value] of Object.entries(data)) {
            const inputElement = document.getElementById(key);
            if (inputElement) {
                inputElement.value = value;
            }
        }
    }

    function getCurrentParams() {
        fetch(`${esp32Address}/get_params`, {method: "GET"})
            .then(response => response.text())
            .then(data => {
                data = JSON.parse(data);
                console.log(data);
                updateDataToPage(data.data);
            })
            .catch(error => console.error("Error:", error));
    }

    window.onload = () => {
        getCurrentParams();
    }

</script>

</html>
